<template>
<div>
    <div style="width:100%;height:360px;border:#ccc solid 1px;font-size:12px" id="map"></div>
</div>
</template>

<script>
import BMap from 'BMap' 
export default {
  data() {
      return {
          map: null
      }
  },
  mounted() {
      this.initMap();
  },
  methods: {
      //创建和初始化地图函数：
    initMap(){
      this.createMap();//创建地图
      this.setMapEvent();//设置地图事件
      this.addMapControl();//向地图添加控件
      this.addMapOverlay();//向地图添加覆盖物
    },
    createMap(){ 
    //   var map;
      this.map = new BMap.Map("map"); 
      this.map.centerAndZoom(new BMap.Point(120.312347,36.061),16);

      this.map.enableScrollWheelZoom();
      this.map.enableKeyboard();
      this.map.enableDragging();
      this.map.enableDoubleClickZoom()
    },
    setMapEvent(){
    //   this.map.enableScrollWheelZoom();
    //   this.map.enableKeyboard();
    //   this.map.enableDragging();
    //  this.map.enableDoubleClickZoom()
    },
    addClickHandler(target,window){
      target.addEventListener("click",function(){
        target.openInfoWindow(window);
      });
    },
    addMapOverlay(){
      var markers = [
        {content:"旅途居住的不二之选",title:"",imageOffset: {width:-46,height:-21},position:{lat:36.059745,lng:120.312419}}
      ];
      for(var index = 0; index < markers.length; index++ ){
        var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
        var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
          imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
        })});
        var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
        var opts = {
          width: 200,
          title: markers[index].title,
          enableMessage: false
        };
        var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
        marker.setLabel(label);
        this.addClickHandler(marker,infoWindow);
        this.map.addOverlay(marker);
      };
    },
    //向地图添加控件
    addMapControl(){
      var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
      scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
      this.map.addControl(scaleControl);
      var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
      this.map.addControl(navControl);
      var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
      this.map.addControl(overviewControl);
    }
  }
}
</script>
